﻿@page "/GridColumnTypes"
@inject WeatherForecastService ForecastService

<div class="demo-description mw-1100">
    <h2>Column Types</h2>
    <p>
        To display data in our Blazor <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a>, <a class="helplink" target="_blank" href="BindGridtoData">bind</a> it to a data collection and add columns. You can define columns in the Data Grid's markup and cannot change the column collection at runtime. The Data Grid suppors the following predefined data column types:
    </p>

    <ul>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridDateEditColumn">DxDataGridDateEditColumn</a> (Date) - Displays date-time values and uses a drop-down calendar to edit these values.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn">DxDataGridColumn</a> (Forecast) - Displays strings and uses a text box to edit values.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridSpinEditColumn">DxDataGridSpinEditColumn</a> (Temp. (&#x2103;)) - Displays numeric values and uses a spin editor to edit these values.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridComboBoxColumn-1">DxDataGridComboBoxColumn</a> (Cloud Cover) - Displays any values and uses a combobox editor to edit values.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCheckBoxColumn">DxDataGridCheckBoxColumn</a> (Precipitation) - Displays disabled checkboxes and allows a user to change their states in the Edit Form.
        </li>
    </ul>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.Field">Field</a> property to bind a column to a field from the Data Grid's data collection. The Data Grid generates a user-friendly column caption based on the field name. Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.Caption">Caption</a> property to specify a custom column name.
    </p>
    <p>
        Declare a <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCommandColumn">DxDataGridCommandColumn</a> object to add a command column. This columns contains data management buttons that allow users to create, edit, and remove rows. Click the <b>Edit</b> button in any row to see the integrated data editors displayed by the columns listed above.
    </p>
    <p>
        YouTube Video: <a class="helplink" target="_blank" href="https://www.youtube.com/watch?v=FadGrIOBrrs&feature=youtu.be">Column Customization</a>
    </p>
</div>

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync"
            PageSize="5"
            RowRemovingAsync="@OnRowRemoving"
            RowUpdatingAsync="@OnRowUpdating"
            RowInsertingAsync="@OnRowInserting"
            InitNewRow="@OnInitNewRow"
            CssClass="mw-1100">

    <DxDataGridCommandColumn Width="100px"></DxDataGridCommandColumn>

    <DxDataGridDateEditColumn Field="@nameof(WeatherForecast.Date)" DisplayFormat="D" EditorFormat="d" EditorDisplayFormat="D"></DxDataGridDateEditColumn>

    <DxDataGridColumn Field="@nameof(WeatherForecast.Forecast)" Caption="Forecast"></DxDataGridColumn>

    <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)" Caption="@("Temp. (\x2103)")" TextAlignment="DataGridTextAlign.Left"></DxDataGridSpinEditColumn>

    <DxDataGridComboBoxColumn Field="@nameof(WeatherForecast.CloudCover)" Caption="Cloud Cover" DataAsync="@ForecastService.GetCloudCoverAsync" TextAlignment="DataGridTextAlign.Left"></DxDataGridComboBoxColumn>

    <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" Caption="Precipitation"></DxDataGridCheckBoxColumn>
</DxDataGrid>

<CodeSnippet_GridColumnTypes></CodeSnippet_GridColumnTypes>

@code {
    async Task OnRowRemoving(WeatherForecast dataItem)
    {
        await ForecastService.Remove(dataItem);
    }
    async Task OnRowUpdating(WeatherForecast dataItem, IDictionary<string, object> newValue)
    {
        await ForecastService.Update(dataItem, newValue);
    }
    async Task OnRowInserting(IDictionary<string, object> newValue)
    {
        await ForecastService.Insert(newValue);
    }
    Task OnInitNewRow(Dictionary<string, object> values)
    {
        values.Add("Date", DateTime.Now);
        values.Add("TemperatureC", 13);
        values.Add("Forecast", "Warm");
        values.Add("CloudCover", "Sunny");
        return Task.CompletedTask;
    }
}
